@page
@{ Layout = "_LayoutHome"; }

<el-card>
    <div slot="header" class="clearfix">
        <span>{{ title }} 赛程</span>
        <el-button style="float: right;padding:3px 0;" type="text" v-on:click="utils.closeLayerSelf" icon="el-icon-back">返 回</el-button>
    </div>
   <div>
        <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-125) + 'px' }">
            <div class="pe-3">
                <el-collapse v-model="activeNames">
                    <el-collapse-item :name="item.guid" :title="item.mark" v-for="item in list">
                        <template slot="title">
                            <i class="bi bi-trophy-fill me-2 text-warning"></i>{{ item.mark }}
                        </template>
                        <el-card>
                            <div slot="header">
                                <div align="center">
                                    <p>（{{item.mark}}）</p>
                                    <div class="text-primary">{{ item.pkBeginDateTimeStr }}-{{ item.pkEndDateTimeStr }}</div>
                                </div>
                            </div>
                            <div>
                                <el-row :gutter="20" v-if="item.vs===2 || item.vs===3">
                                    <el-col :span="24" v-for="room in item.roomList" align="center">
                                        <el-card class="w-50 rounded-pill">
                                            <div class="d-flex justify-content-between align-items-center" v-on:click="btnViewRoomClick(room)" style="cursor:pointer;">
                                                <div v-if="room.userId_A>0" class="position-relative">
                                                    <span class="avatar avatar-lg">
                                                        <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                                    </span>
                                                    <span>
                                                        {{ room.userA.displayName }}
                                                    </span>
                                                    <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                        <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                                        <span v-else class="text-danger">负</span>
                                                    </span>
                                                </div>
                                                <div v-else>
                                                    <span class="avatar avatar-lg">
                                                        <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <i class="bi bi-trophy-fill display-1 text-warning py-2 px-4" v-if="item.vs===2"></i>
                                                    <i class="bi bi-trophy display-1" v-else></i>
                                                </div>
                                                <div v-if="room.userId_B>0" class="position-relative">
                                                    <span>
                                                        {{ room.userB.displayName }}
                                                    </span>
                                                    <span class="avatar avatar-lg">
                                                        <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                                    </span>
                                                    <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                        <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                                        <span v-else class="text-danger">负</span>
                                                    </span>
                                                </div>
                                                <div v-else>
                                                    <span class="avatar avatar-lg">
                                                        <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                                    </span>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-else-if="item.vs===4">
                                    <el-col :span="12" v-for="room in item.roomList" align="center">
                                        <div style="margin-top:18px;cursor:pointer;" v-on:click="btnViewRoomClick(room)">
                                            <el-card>
                                                <el-row :gutter="20">
                                                    <el-col :span="10">
                                                        <div v-if="room.userId_A>0" class="position-relative">
                                                            <el-avatar :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                                            <div>
                                                                {{ room.userA.displayName }}
                                                            </div>
                                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                                <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                                                <span v-else class="text-danger">负</span>
                                                            </span>
                                                        </div>
                                                        <div v-else>
                                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="4">vs</el-col>
                                                    <el-col :span="10">
                                                        <div v-if="room.userId_B>0" class="position-relative">
                                                            <el-avatar :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                                            <div>
                                                                {{ room.userB.displayName }}
                                                            </div>
                                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                                <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                                                <span v-else class="text-danger">负</span>
                                                            </span>
                                                        </div>
                                                        <div v-else>
                                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-else>
                                    <el-col :span="6" v-for="room in item.roomList" align="center">
                                        <div style="margin-top:18px;cursor:pointer;" v-on:click="btnViewRoomClick(room)">
                                            <el-card>
                                                <el-row :gutter="20">
                                                    <el-col :span="10">
                                                        <div v-if="room.userId_A>0" class="position-relative">
                                                            <el-avatar :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                                            <div>
                                                                {{ room.userA.displayName }}
                                                            </div>
                                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                                <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                                                <span v-else class="text-danger">负</span>
                                                            </span>
                                                        </div>
                                                        <div v-else>
                                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="4">vs</el-col>
                                                    <el-col :span="10">
                                                        <div v-if="room.userId_B>0" class="position-relative">
                                                            <el-avatar :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                                            <div>
                                                                {{ room.userB.displayName }}
                                                            </div>
                                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                                <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                                                <span v-else class="text-danger">负</span>
                                                            </span>
                                                        </div>
                                                        <div v-else>
                                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-scrollbar>
    </div>
</el-card>
@section Scripts{
    <script src="/sitefiles/assets/js/home/exam/examPkRooms.js" type="text/javascript"></script>
}